<template>
	<div>
		<div>筛选查询
			<el-select v-model="value" placeholder="请选择项目">
				<el-option v-for="item in Allproject" :key="item.projectId" :label="item.projectName"
					:value="item.projectName">
				</el-option>
			</el-select>
			<div class="block" style="float: right; position: relative;right: 700px;">
				<span class="demonstration">开始时间</span>
				<el-date-picker v-model="value1" type="date" placeholder="选择日期">
				</el-date-picker>
			</div>
			<div class="block" style="float: right;position: relative;right: 120px;">
				<span class="demonstration">结束时间</span>
				<el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期">
				</el-date-picker>
			</div>
			<el-button style="float: right; position: relative; left: 270px;" @click="selByCondition()">查询</el-button>
		</div>

		<div id="main" style="width: 600px;height:400px;">

		</div>
	</div>

</template>

<script>
	export default {
		name: 'severitypro',
		data() {
			return {

				Allproject: [],
				value: "",
				value1: "",
				value2: "",
				data1: []
			}
		},

		methods: {

			init: function() {

				var chartDom = document.getElementById('main');
				var myChart = this.$echarts.init(chartDom);
				var option;

				option = {
					toolbox: {
						show: true,
						feature: {
							saveAsImage: {
								show: true,
								excludeComponents: ['toolbox'],
								pixelRatio: 2
							}
						}
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					series: [{
						name: '缺陷严重程度占比',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: this.data1
					}]
				};

				option && myChart.setOption(option);
			},
			getAllProjects() {
				this.$http.get("projectInfo/getAllProject").then(resp => {
					this.Allproject = resp.data.data
				})
			},
			getAllSeverityCount() {
				this.$http.get("defectRecord/getAllSeverityCount").then(resp => {
					this.data1 = resp.data.data
					this.init()
				})
			},
			selByCondition() {
				this.$http.post("defectRecord/getSeverityCount", {
					"projectName": this.value,
					"startTime": this.value1,
					"endTime": this.value2
				}).then(resp => {
					this.data1 = resp.data.data

					this.init()
				})
			}


		},
		created() {
			this.getAllProjects()
			this.getAllSeverityCount()
		},
		mounted() {
			this.init()
		}
	}
</script>

<style>
</style>
